<template>
  <div class="fullscreen-video">
    <video autoplay loop muted>
      <source src="/bg.mp4" type="video/mp4" />
    </video>
    <div class="content">
      <h1>404</h1>
      <p>页面被吃咯</p>
    </div>
    <audio autoplay loop>
      <source src="/vvvv.mp3" type="audio/mpeg" />
    </audio>
  </div>
</template>

<style lang="scss" scoped>
.fullscreen-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  font-size: 2rem;
  h1 {
    font-size: 10rem;
    color: black;
    font-family: "Courier New", Courier, monospace;
    white-space: nowrap;
    font-weight: 900;
  }
  p {
    font-size: 2rem;
    font-weight: 900;
  }
}

audio {
  display: none;
}
</style>

